<template>
  <div class="map-wrap">
    <div id="map"></div>
    <div class="map-control-container">
      <el-popover placement="top" width="400" trigger="click">
        <div class="map-style-container">
          <div :class="activeMapStyleIndex == 1 ? 'show' : ''" @click="changeMapLayer(1)">
            <img src="./../images/map1.jpg" width="80px" height="80px" />
            <p>普通模式</p>
          </div>
          <div :class="activeMapStyleIndex == 2 ? 'show' : ''" @click="changeMapLayer(2)">
            <img src="./../images/map2.jpg" width="80px" height="80px" />
            <p>深色模式</p>
          </div>
          <!-- <div
            :class="activeMapStyleIndex == 3 ? 'show' : ''"
            @click="changeMapLayer(3)"
          >
            <img src="./../images/map3.jpg" width="80px" height="80px" />
            <p>卫星模式</p>
          </div> -->
          <div :class="activeMapStyleIndex == 3 ? 'show' : ''" @click="changeMapLayer(3)">
            <img src="./../images/map4.png" width="80px" height="80px" />
            <p>三维地图</p>
          </div>
        </div>
        <div class="btn-box" slot="reference" @click="controlChange(1)">
          <i class="iconfont el-icon-layer" :class="activeIndex == 1 ? 'active' : ''"></i>
        </div>
      </el-popover>

      <div class="btn-box" @click="controlChange(2)">
        <i class="iconfont el-icon-ruler" :class="activeIndex == 2 ? 'active' : ''"></i>
      </div>
      <el-popover placement="top" width="260" trigger="click">
        <div style="padding: 15px">
          <alarm-control @showMarker="showMarker" @refreshMap="refreshPoints" />
        </div>
        <div class="btn-box" slot="reference" @click="controlChange(3)">
          <i class="el-icon-message-solid" :class="activeIndex == 3 ? 'active' : ''"></i>
        </div>
      </el-popover>
    </div>
    <!--轨迹回放-->
    <trace-map :visible.sync="traceDialogVisible" :tracePoint="tracePoint" />
    <!--视频播放-->
    <video-dialog :visible.sync="videoDialogVisible" :tracePoint="tracePoint" />
  </div>
</template>

<script>
import alarmControl from "./alarmControl";
import Vue from "vue";

import AMap from "AMap";

import NOBIND_PNG from "../icons/noBind.png";
import CAR_PNG from "../icons/car.png";
import INSPECTOR_PNG from "../icons/inspector.png";
import PERSON_PNG from "../icons/person.png";
import TRASH_PNG from "../icons/trash.png";
import CAMERA_PNG from "../icons/camera.png";
import { homeRealtime } from "@/api/lsd/lsd";

// import heartbeat_png from "../icons/heartbeat.png";
// import ox_png from "../icons/ox.png";
// import temperature_png from "../icons/temperature.png";
// import pressure_png from "../icons/pressure.png";
// import battery_png from "../icons/battery.png";
// import steps_png from "../icons/steps.png";



import { getFence } from "@/api/base/fence";
import { getHealth } from "@/api/lsd/lsd";

import traceMap from "./traceMap";
import videoDialog from "./videoDialog";

export default {
  name: "Index",
  components: { alarmControl, traceMap, videoDialog },
  dicts: ["base_car_type", "base_person_type", "base_facility_type"],
  // props: {
  //   points: {
  //     type: [, Object],
  //     required: true,
  //   },
  // },
  data() {
    return {
      map: null,
      points: [],
      clusterMarkerList: [],
      fenceList: [], //地图上所有的围栏
      activeIndex: 0,
      activeMapStyleIndex: 1,
      mapViewMode: "2D",
      mapRuler: null,
      timer: null,
      traceDialogVisible: false,
      tracePoint: null,
      videoDialogVisible: false,


    };
  },
  created() { },
  // watch: {
  //   points: {
  //     deep: true,
  //     handler(val) {
  //       this.markerClustererRefresh();
  //     },
  //   },
  // },
  methods: {
    refreshPoints(points) {
      this.points = points;
      this.markerClustererRefresh();
    },
    mapInit() {
      this.map = new AMap.Map("map", {
        resizeEnable: true,
        zoom: 12,
        zooms: [3, 20],
        expandZoomRange: true,
        center: [114.190623, 30.538394],
      });
      let _this = this;
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.MapType",
          "AMap.RangingTool",
        ],
        function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          _this.map.addControl(new AMap.ToolBar());

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          _this.map.addControl(new AMap.Scale());

          // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          // _this.map.addControl(new AMap.OverView({ isOpen: true }));

          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          _this.map.addControl(new AMap.MapType());

          _this.ruler = new AMap.RangingTool(_this.map);
        }
      );
      let _renderClusterMarker = function (context) {
        let count = _this.points.length > 0 ? _this.points.length : 10;
        var factor = Math.pow(context.count / count, 1 / 2);
        var div = document.createElement("div");
        var Hue = 200 + factor * 50;
        var bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
        var fontColor = "hsla(" + Hue + ",100%,90%,1)";
        var borderColor = "hsla(" + Hue + ",100%,40%,1)";
        var shadowColor = "hsla(" + Hue + ",100%,90%,1)";
        div.style.backgroundColor = bgColor;
        var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
        div.style.width = div.style.height = size + "px";
        div.style.border = "solid 1px " + borderColor;
        div.style.borderRadius = size / 2 + "px";
        div.style.boxShadow = "0 0 5px " + shadowColor;
        div.innerHTML = context.count;
        div.style.lineHeight = size + "px";
        div.style.color = fontColor;
        div.style.fontSize = "14px";
        div.style.textAlign = "center";
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
        context.marker.setContent(div);
      };
      _this.map.plugin(["AMap.MarkerClusterer"], function () {
        _this.MarkerClustererMarker = new AMap.MarkerClusterer(
          _this.map, // 地图实例
          _this.clusterMarkerList, // 海量点组成的数组
          {
            gridSize: 80,
            minClusterSize: 20,
            renderClusterMarker: _renderClusterMarker,
          }
        );
      });
    },
    // markerClustererRefresh() {
    //   this.points.forEach((v) => {
    //     let index = this.clusterMarkerList.findIndex(
    //       (item) => item.getExtData().deviceId == v.deviceId
    //     );
    //     if (index == -1) {
    //       let marker = new AMap.Marker({
    //         position: new AMap.LngLat(v.lng, v.lat),
    //         icon: new AMap.Icon({
    //           image: v.icon ? v.icon : NOBIND_PNG,
    //           size: new AMap.Size(48, 48), //图标大小
    //           imageSize: new AMap.Size(48, 48),
    //         }),
    //         offset: new AMap.Pixel(-24, -42),
    //         extData: {
    //           deviceId: v.deviceId,
    //           pointType: v.pointType,
    //         },
    //       });
    //       marker.setLabel({
    //         content: `<div class="map-lable">${v.name}</div>`,
    //         offset: new AMap.Pixel(0, 0),
    //         direction: "top",
    //       });

    //       this.bindInfoWindow(marker);

    //       this.clusterMarkerList.push(marker);
    //       this.MarkerClustererMarker.addMarker(marker);
    //     }
    //   });

    //   let markers = this.map.getAllOverlays("marker"); //获取所有 在地图上的车辆
    //   markers.forEach((m) => {
    //     let deviceId = m.getExtData().deviceId;
    //     //改变图标
    //     m.setIcon(
    //       new AMap.Icon({
    //         image: this.points.find((v) => v.deviceId == deviceId).icon
    //           ? this.points.find((v) => v.deviceId == deviceId).icon
    //           : NOBIND_PNG,
    //         size: new AMap.Size(48, 48), //图标大小
    //         imageSize: new AMap.Size(48, 48),
    //       })
    //     );
    //     //移动车辆和人
    //     if (m.getExtData().pointType != 3) {
    //       let point = this.points.find((v) => v.deviceId == deviceId);
    //       let lnglat = m.getPosition();
    //       let Xgap = Math.abs(parseFloat(lnglat.lng) - parseFloat(point.lng));
    //       var Ygap = Math.abs(parseFloat(lnglat.lat) - parseFloat(point.lat));
    //       if (Xgap > 0.000095 && Ygap > 0.000095) {
    //         //距离太小moveTo 方法不会进入moveend 事件  超过此范围才moveTo

    //         m.moveTo([parseFloat(point.lng), parseFloat(point.lat)], 500);
    //       }
    //     }
    //   });
    // },
    markerClustererRefresh() {
      var points = this.points;
      console.log(points);
      if (points.length > 0) {
        const _this = this;
        this.MarkerClustererMarker.removeMarkers(this.clusterMarkerList);
        this.clusterMarkerList = [];
        for (let i = 0; i < points.length; i++) {
          let marker = new AMap.Marker({
            position: new AMap.LngLat(points[i].lng, points[i].lat),
            icon: new AMap.Icon({
              image: points[i].icon ? points[i].icon : NOBIND_PNG,
              size: new AMap.Size(48, 48), //图标大小
              imageSize: new AMap.Size(48, 48),
            }),
            offset: new AMap.Pixel(-24, -42),
            extData: {
              deviceId: points[i].deviceId,
              pointType: points[i].pointType,
            },
          });
          marker.setLabel({
            content: `<div class="map-lable">${points[i].name}</div>`,
            // offset: new AMap.Pixel(0, 0),
            direction: "top",
          });

          this.bindInfoWindow(marker);

          this.clusterMarkerList.push(marker);
        }
        this.MarkerClustererMarker.setMarkers(this.clusterMarkerList);

        this.map.setFitView();
      }
    },

    bindInfoWindow(marker) {
      //鼠标点击marker弹出自定义的信息窗体
      let _this = this;
      AMap.event.addListener(marker, "click", async function () {
        let point = _this.points.find(
          (v) => v.deviceId == marker.getExtData().deviceId
        );
        console.log(point);
        let typeName = "";
        let healthData = null
        if (point.pointType == 1) {
          //代表车
          typeName = _this.selectDictLabel(
            _this.dict.type.base_car_type,
            point.carType
          );
        } else if (point.pointType == 2) {
          //代表人
          typeName = _this.selectDictLabel(
            _this.dict.type.base_person_type,
            point.personType
          );
          //获取手环健康状态
          // const res = await getHealth({ imei: point.devicePhoneNum })
          // healthData = res.data

        } else if (point.pointType == 3) {
          //代表垃圾桶
          typeName = _this.selectDictLabel(
            _this.dict.type.base_facility_type,
            point.facilityType
          );
        }
        point.typeName = typeName;
        if (point) {
          var infoBodyHtml = `

        <div class="peopleLayer">
    <h1>
      <span class="objName">{{point.name}}</span>&nbsp;&nbsp;<span>[{{point.typeName}}]</span>
    </h1>
    <div class="content">
      <div class="nav">
        <div class="top">
          <div class="name">
            <span><i class="iconfont el-icon-shebei"></i><em v-if="point.devicePhoneNum">{{point.devicePhoneNum}}</em><em v-else>暂无设备</em></span>
            <span v-if="point.pointType!==3"><i class="el-icon-date"></i><em>{{point.inWorkTime==1?'当班':'未当班'}}</em></span>
          </div>
          <div class="alarm" style="display: none;">
            <i class="iconfont icon-baojing2"></i><span data-field="alarm" title=""></span>
          </div>
        </div>

        <div class="status-shift">
          <div class="online-status" :class="point.onlineStatus=='在线'?'':'offline'">{{point.onlineStatus}}</div>
          <div class="work-status"  v-if="point.pointType==3&&point.onlineStatus=='在线'">
            <i class="iconfont el-icon-fillover" :class="point.overflow=='满'?'offwork':'onwork'"></i>
            <span :class="point.overflow=='满'?'offwork':'onwork'">
               {{point.overflow=='满'?'已满':'未满'}}
            </span>
          </div>
          <div style="color:#737373;">
            <i class="el-icon-time"></i><span style="margin-left:5px;">{{point.dataTime}}</span>
          </div>
       
        </div>
        <ul class="info-list" v-if="point.onlineStatus !== '未上线'">
          <li class="half" :class="point.batteryQuantityStatus=='电量正常'?'normal-text':'alarm-text'" v-if="point.pointType == 3">
            <i class="iconfont el-icon-battery"></i><span>{{point.batteryQuantityStatus}}</span>
          </li>
          <li class="half" :class="point.fire=='无火警'?'':'alarm-text'" v-if="point.pointType == 3">
            <i class="iconfont el-icon-fire" ></i><span >{{point.fire}}</span>
          </li>

          <li  v-if="point.pointType == 2&&point.phone">
            <i class="el-icon-mobile-phone" ></i><span >{{point.phone}}</span>
          </li>

 
          <li>
            <i class="el-icon-location-information"></i><span data-field="address">{{point.location}}</span>
          </li>
        </ul>

      </div>

      <div class="btn" v-if="point.pointType != 3&&point.onlineStatus !== '未上线'">
        <span v-on:click="traceReplay(point)"><i class="iconfont el-icon-guiji"></i>轨迹</span>
        <span v-if="point.pointType==1" v-on:click="showVideo(point)" style="width:50px"><i class="el-icon-video-camera"></i>视频</span>
      </div>
    </div>
  </div>`;
          // 生成html 和 时间
          var MyComponent = Vue.extend({
            template: infoBodyHtml,
            data: function () {
              return {
                point: point,
                // healthData: healthData,
                // heartbeat_png: heartbeat_png,
                // ox_png: ox_png,
                // temperature_png: temperature_png,
                // pressure_png: pressure_png,
                // battery_png: battery_png,
                // steps_png: steps_png,
              };
            },
            methods: {
              traceReplay: function (point) {
                _this.tracePoint = point;

                _this.traceDialogVisible = true;
              },
              showVideo: function (point) {
                _this.tracePoint = point;
                _this.videoDialogVisible = true;
              },
            },
          });

          var component = new MyComponent().$mount();
          var infoWindow = new AMap.InfoWindow({
            content: component.$el,
            // anchor: "middle-center",
            offset: new AMap.Pixel(0, -65),
          });
          infoWindow.open(_this.map, marker.getPosition());
          // _this.targetCarLicnum = marker.getExtData();
        }
      });
    },
    showMarker(deviceId) {
      this.clusterMarkerList.forEach((v) => {
        if (v.getExtData().deviceId == deviceId) {
          this.map.setZoomAndCenter(20, v.getPosition());
          v.emit("click");
        }
      });
    },
    // showMarkerType(type) {
    //   if (type == 1) {
    //     //车辆
    //     this.clusterMarkerList.forEach((v) => {
    //       if (v.getExtData().pointType == 1) {
    //         v.show();
    //       } else {
    //         v.hide();
    //       }
    //     });
    //   } else if (type == 2) {
    //     //人员
    //     this.clusterMarkerList.forEach((v) => {
    //       if (v.getExtData().pointType == 2) {
    //         v.show();
    //       } else {
    //         v.hide();
    //       }
    //     });
    //   } else if (type == 3) {
    //     //垃圾桶
    //     this.clusterMarkerList.forEach((v) => {
    //       if (v.getExtData().pointType == 3) {
    //         v.show();
    //       } else {
    //         v.hide();
    //       }
    //     });
    //   } else if (type == 0) {
    //     this.clusterMarkerList.forEach((v) => {
    //       v.show();
    //     });
    //   }
    // },
    showPolygon(fenceObj) {
      if (fenceObj.fenceId) {
        let isHas = false;
        this.fenceList.forEach((v) => {
          if (v.getExtData() == fenceObj.fenceId) {
            isHas = true;
            if (fenceObj.fenceType == "circle") {
              //圆形
              this.map.setZoomAndCenter(15, v.getCenter()[0]);
            } else {
              this.map.setZoomAndCenter(15, v.getPath()[0]);
            }
          }
        });
        if (!isHas) {
          if (fenceObj.fenceType == "circle") {
            // 构造矢量圆形
            let circlePoints = fenceObj.latlng.split(",");
            var circle = new AMap.Circle({
              center: new AMap.LngLat(circlePoints[1], circlePoints[0]), // 圆心位置
              radius: fenceObj.radius, //半径
              strokeColor: "red",
              strokeOpacity: 0.2,
              strokeWeight: 4,
              fillColor: fenceObj.bgColor,
              strokeStyle: "solid",
              extData: fenceObj.fenceId,
            });
            this.map.add(circle);
            this.fenceList.push(circle);
            this.map.setZoomAndCenter(15, [circlePoints[1], circlePoints[0]]);
          } else if (fenceObj.fenceType == "rectangle") {
            let recPoints = fenceObj.latlng.split("|");

            // 构造矢量矩形  数据库存储的是左上和右下
            var southWest = new AMap.LngLat(
              recPoints[0].split(",")[1],
              recPoints[1].split(",")[0]
            );
            var northEast = new AMap.LngLat(
              recPoints[1].split(",")[1],
              recPoints[0].split(",")[0]
            );

            var bounds = new AMap.Bounds(southWest, northEast);

            var rectangle = new AMap.Rectangle({
              bounds: bounds,
              strokeColor: "red",
              strokeOpacity: 0.2,
              strokeWeight: 4,
              fillColor: fenceObj.bgColor,
              strokeStyle: "solid",
              extData: fenceObj.fenceId,
            });
            this.map.add(rectangle);
            this.fenceList.push(rectangle);

            this.map.setZoomAndCenter(15, [
              recPoints[0].split(",")[1],
              recPoints[1].split(",")[0],
            ]);
          } else if (fenceObj.fenceType == "polygon") {
            // 构造矢量多边形
            let polyPoints = fenceObj.latlng.split("|");
            let path = [];
            polyPoints.forEach((poly) => {
              let item = poly.split(",");
              path.push([item[1], item[0]]);
            });

            var polygon = new AMap.Polygon({
              path: path,
              strokeColor: "red",
              strokeOpacity: 0.2,
              strokeWeight: 4,
              fillColor: fenceObj.bgColor,
              strokeStyle: "solid",
              extData: fenceObj.fenceId,
            });

            this.map.add(polygon);
            this.fenceList.push(polygon);
            this.map.setZoomAndCenter(15, [
              polyPoints[0].split(",")[1],
              polyPoints[0].split(",")[0],
            ]);
          } else if (fenceObj.fenceType == 4) {
            let polylinePoints = fenceObj.latlng.split("|");
            let path = [];
            polylinePoints.forEach((poly) => {
              let item = poly.split(",");
              path.push([item[1], item[0]]);
            });
            //构造路线
            var polyline = new AMap.Polyline({
              strokeColor: "#3366FF",
              path: path,

              strokeOpacity: 1,
              strokeWeight: 6,
              // 线样式还支持 'dashed'
              strokeStyle: "solid",
              // strokeStyle是dashed时有效
              // strokeDasharray: [10, 5],
              extData: fenceObj.fenceId,
            });
            this.map.add(polyline);
            this.fenceList.push(polyline);

            this.map.setZoomAndCenter(15, [
              polylinePoints[0].split(",")[1],
              polylinePoints[0].split(",")[0],
            ]);
          }
        }
      }
    },

    controlChange(index) {
      if (this.activeIndex == index) {
        this.activeIndex = 0;
        if (index == 2) {
          this.ruler.turnOff();
        }
      } else {
        this.activeIndex = index;
        if (index == 2) {
          this.ruler.turnOn();
        } else {
          this.ruler.turnOff();
        }
      }
    },
    changeMapLayer(index) {
      this.activeMapStyleIndex = index;
      if (index == 1) {
        if (this.mapViewMode == "3D") {
          this.mapViewMode = "2D";
          this.map = new AMap.Map("map", {
            resizeEnable: true,
            zoom: 12,
          });
          this.markerClustererInit();
        } else {
          this.map.setMapStyle("amap://styles/normal");
        }
      } else if (index == 2) {
        this.map.setMapStyle("amap://styles/darkblue");
      } else if (index == 3) {
        if (this.mapViewMode == "2D") {
          this.mapViewMode = "3D";
          this.map = new AMap.Map("map", {
            resizeEnable: true,
            zoom: 12,
            pitch: 50,
            viewMode: "3D",
            buildingAnimation: true, //楼块出现是否带动画
          });
          this.markerClustererInit();
        }
      }
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    //获取龙阳区围栏
    getLYFence() {
      getFence(1).then((response) => {
        let polyPoints = response.data.latlng.split("|");
        let path = [];
        polyPoints.forEach((poly) => {
          let item = poly.split(",");
          path.push([item[1], item[0]]);
        });

        var polygon = new AMap.Polygon({
          path: path,
          strokeColor: "red",
          strokeOpacity: 0.5,
          strokeWeight: 4,
          fillColor: response.data.bgColor,
          strokeStyle: "dashed",
          extData: 1,
        });

        this.map.add(polygon);
        this.fenceList.push(polygon);
      });
    },
  },

  mounted() {
    // this.getLYFence();
    this.mapInit();
  },
  beforeDestroy() { },
};
</script>

<style lang="scss">
.map-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}

.map-control-container {
  position: absolute;
  z-index: 119;
  right: 100px;
  bottom: 8px;
  z-index: 999;
  display: flex;

  .btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 50, 55, 0.9);
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin-right: 4px;
    color: #969696;

    .active {
      color: #25bb96;
    }
  }
}

.map-style-container {
  display: flex;
  justify-content: space-around;
  align-items: center;

  &>div {
    width: 30%;
    text-align: center;
    cursor: pointer;

    img {
      border: 1px solid transparent;
    }

    p {
      margin: 5px;
    }
  }

  .show {
    img {
      border: 1px solid #25bb96;
    }
  }
}

.amap-marker-label {
  position: relative;
  background-color: transparent;
  border: 0;
  padding: 0;

  .map-lable {
    background: rgba(0, 0, 0, 0.75);
    border-radius: 3px;
    color: #fff;
    padding: 4px;
    font-size: 12px;
    font-weight: 400;
    width: auto;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
  }
}

.amap-info-content {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 0;

  .amap-info-close {
    top: 15px;
  }

  .peopleLayer {
    width: 300px;
    background: rgba(235, 238, 245, 0.8);
    box-shadow: 0 4px 10px 0 rgba(173, 195, 210, 0.6);
    border-radius: 4px;
    font-size: 12px;

    h1 {
      height: 40px;
      line-height: 40px;
      background: linear-gradient(0deg,
          rgba(82, 147, 204, 0.1),
          rgba(220, 226, 230, 0.08));
      color: #333;
      padding-left: 15px;
      font-size: 14px;
      margin: 0;
    }

    .content {
      padding: 10px;

      .btn {
        margin-top: 10px;
        height: 24px;
        color: #0d73df;

        span {
          padding-left: 4px;
          font-size: 12px;
          float: left;
          width: 54px;
          height: 24px;
          line-height: 24px;
          margin-right: 15px;
          background: rgba(13, 115, 223, 0.2);
          border: 1px solid #0d73df;
          border-radius: 4px;
          cursor: pointer;
        }
      }

      .nav {
        background: #fbfcff;
        padding: 0 10px 10px;
        border-radius: 2px;

        .top {
          display: flex;
          align-items: center;
          height: 30px;
          color: #737373;
          border-bottom: 1px dashed #e6e6e6;

          .name {
            flex: 1;
            display: flex;
            justify-content: space-between;
            padding-right: 10px;
            max-width: 100%;

            span {
              flex: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;

              i {
                color: #40c2ff;
                margin-right: 4px;
              }

              em {
                font-style: normal;
                font-weight: 400;
              }
            }
          }

          .alarm {
            float: right;
            box-sizing: border-box;
            visibility: hidden;
            width: 80px;
            height: 20px;
            line-height: 20px;
            padding-left: 4px;
            background: rgba(255, 33, 33, 0.2);
            color: #f22;
            border-radius: 10px;
          }
        }

        .status-shift {
          position: relative;
          display: flex;
          justify-content: space-between;
          margin-top: 8px;
          margin-bottom: 4px;
          line-height: 22px;

          .online-status {
            width: 40px;
            height: 22px;
            margin-right: 8px;
            background: rgba(31, 132, 235, 0.1);
            text-align: center;
            border-radius: 2px;
            color: #1f84eb;
          }

          .offline {
            background: rgba(51, 51, 51, 0.1);
            color: #737373;
          }

          .work-status {
            flex: 1;
            height: 22px;
            color: #737373;
            padding-left: 10px;
            background: #f5f5f5;
            border-radius: 2px;

            .offwork {
              color: #e4393c;
            }

            .onwork {
              color: #35ac38;
            }
          }
        }

        .info-list {
          color: #737373;
          margin: 0;
          padding: 0;

          i {
            margin-right: 4px;
          }

          .half {
            box-sizing: border-box;
            float: left;
            width: 50%;
            padding-right: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          li {
            list-style: none;
            margin: 2px 0;
          }

          .alarm-text {
            color: #e4393c;
          }

          .normal-text {
            color: #35ac38;
          }
        }
      }
    }
  }
}
</style>
